<template>
	<fragments>
		<u-sticky>
			<!-- <view class="u-flex u-row-between u-m-l-18 u-m-r-18 u-p-t-18 u-p-b-24" style="background-color: #f5f5f5;">
	 		<view class="fw-large " @click="showOper = true">

	 			<text class="u-font-40 u-m-r-8">订单{{indexEnum.orderStateFillter[detailObj.orderState]}}</text>
	 			<u-icon name="arrow-right" size="32rpx"></u-icon>
	 		</view>
	 		<view>
	 		</view>
	 	</view> -->
			<view class="u-flex u-p-t-18 u-p-b-18" style="background-color: #f5f5f5;">
				<view class="line">

				</view>
				<view @click="showOper = true">
					<text class="u-font-30 u-m-r-8">订单{{indexEnum.orderStateFillter[detailObj.orderState]}}</text>
					<u-icon name="arrow-right" size="30rpx"></u-icon>
				</view>
			</view>
		</u-sticky>
		<view class="container">
			<view class="operateBox bg-white" >
				<!-- v-if="detailObj.orderState==15 || detailObj.orderState==20 && detailObj.applyState!=2" 这个是操作栏是否展示 -->
				<u-grid :border="false" :col="4">
					<!-- v-if="userPinia.isLoginType ==3 && detailObj.orderState==1||userPinia.isLoginType==4&&detailObj.orderState==10" -->
					<u-grid-item
						v-if="userPinia.isLoginType ==3 && detailObj.orderState==5 ||userPinia.isLoginType==4&&detailObj.orderState==10"
						@click="closeShow = true">
						<u-icon size="40" label-size='26' name="close-circle-fill" label-pos="bottom"
							:label="userPinia.isLoginType==3?'取消订单':'取消'"></u-icon>
					</u-grid-item>
					<!--  v-if="detailObj.orderState==12&&detailObj.orderType!==3||detailObj.orderState==13" @click="orderOperate(20,'完成')" -->
					<u-grid-item
						v-if="detailObj.orderType == 11 && (detailObj.orderState==12||detailObj.orderState==10)">
						<u-icon size="40" @click="orderOperate(20,'结束任务')" label-size='26' name="checkmark-circle-fill"
							label-pos="bottom" label="任务结束"></u-icon>
					</u-grid-item>
					<u-grid-item>
						<u-icon size="40" v-if="detailObj.applyState==2 && detailObj.jobType==1" @click="returnAed" label-size='26' name="lock-fill" label-pos="bottom"
							label="归还AED"></u-icon>
					</u-grid-item>
				</u-grid>

			</view>
			<view class="orderInfo bg-white u-m-t-26">
				<u-cell-group>
					<u-cell-item title="订单号" :value="detailObj.orderNo" :arrow="false">
						<template v-slot:right-icon>
							<u-button size="mini" type="warning" class="u-m-l-12"
								@click="copy(detailObj.orderNo)">复制</u-button>
						</template>
					</u-cell-item>
					<u-cell-item title="下单者姓名" :value="detailObj.linkName || ''" :arrow="false"></u-cell-item>
					<u-cell-item title="下单者电话" :value="detailObj.phone || ''" :arrow="false">
						<template v-slot:right-icon>
							<u-icon v-if="!showWholePhone" style="font-size:43rpx;vertical-align: -1px;" name="eye"
								@click="detailObj.phone = detailObj.wholePhone;showWholePhone = true"></u-icon>
							<u-icon v-if="detailObj.phone" style="font-size:43rpx;vertical-align: -1px;"
								name="phone-fill" @click="callphone(detailObj.wholePhone)"></u-icon>
						</template>
					</u-cell-item>
					<!-- <u-cell-item title="层" :value="detailObj.floorName" :arrow="false"></u-cell-item> -->
					<u-cell-item title="AED状态" :title-style="{fontSize:'30rpx'}" :arrow="false" >
						<template v-slot:right-icon>
							<span :style="{color:detailObj.applyState==1?'#2ecc71':detailObj.applyState==2?'#e74c3c':'',fontSize:'30rpx'}">
								{{detailObj.applyState== 1 ? '未使用' : detailObj.applyState == 2 ? '使用中' :detailObj.applyState == ''?'无':'已归还'}}
							</span>
							<u-icon size="32" @click="reloadClick" label-size='26' name="reload" label-pos="bottom"></u-icon>
						</template>
					</u-cell-item>
					<u-cell-item v-if="detailObj.jobType==1" title="AED位置" :value="detailObj.aedAddress" :arrow="false">
					</u-cell-item>
					<u-cell-item v-if="detailObj.jobType==1" title="AED位置图片" :arrow="false" :title-style="{width:'100%'}"
						:label-style="{width:'100%'}">
						<template v-slot:label>
							<view v-if="detailObj.aedSiteUrl" class="u-m-b-8 text-black"
								@click="showBigimg(detailObj.aedSiteUrl)">
								<image style="margin-top: 10px;width:100%;height: 360rpx" :src="detailObj.aedSiteUrl"
									mode="aspectFit"></image>
							</view>
						</template>
					</u-cell-item>
					<u-cell-item v-if="detailObj.jobType==1 || detailObj.jobType==2" title="患者位置" :value="detailObj.beeperAddress" :arrow="false">
					</u-cell-item>
					<u-cell-item v-if="detailObj.jobType==1 || detailObj.jobType==2" title="患者坐标图片" :arrow="false" :title-style="{width:'100%'}"
						:label-style="{width:'100%'}">
						<template v-slot:label>
							<view v-if="detailObj.beeperSiteUrl" class="u-m-b-8 text-black"
								@click="showBigimg(detailObj.beeperSiteUrl)">
								<image style="margin-top: 10px;width:100%;height: 360rpx" :src="detailObj.beeperSiteUrl"
									mode="aspectFit"></image>
							</view>
						</template>
					</u-cell-item>


					<u-cell-item title="现场图片" :arrow="false" :title-style="{width:'100%'}"
						:label-style="{width:'100%'}">
						<template v-slot:label>
							<view v-if="detailObj.problemImg" class="u-m-b-8 text-black"
								@click="showBigimg(detailObj.problemImg)">
								<image style="margin-top: 10px;width:100%;height: 360rpx" :src="detailObj.problemImg"
									mode="aspectFit"></image>
							</view>
						</template>
					</u-cell-item>

					<u-cell-item title="现场视频" :arrow="false" :title-style="{width:'100%'}"
						:label-style="{width:'100%'}">
						<template v-slot:label>
							<view v-if="detailObj.problemVideo" class="u-m-b-8 text-black">
								<video style="margin-top: 10px;width:100%;height: 360rpx" :src="detailObj.problemVideo"
									controls direction="90"></video>
							</view>
						</template>
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<!-- 订单跟踪 -->
		<u-popup closeable v-model="showOper" @open="getOper" mode="bottom">
			<viwe class="showOper">
				<view class="title">订单跟踪</view>
				<view class="u-p-30">
					<u-time-line>
						<u-time-line-item v-for="(item,index) in operList" :key="index">
							<!-- 此处自定义了左边内容，用一个图标替代 -->
							<template v-slot:node>
								<view class="u-node" style="background: #19be6b;">
									<!-- 此处为uView的icon组件 -->
									<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-title">{{item.operation}}</view>
									<!-- <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view> -->
									<view class="u-order-time">{{item.operationDate}}</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>

					<u-empty v-if="operList.length===0" text="暂无记录"></u-empty>
				</view>
			</viwe>
		</u-popup>
		<!-- 取消订单 -->
		<u-modal :title="userPinia.isLoginType==3?'取消订单':'取消'" v-model="closeShow" async-close ref="claerEl"
			show-cancel-button @confirm="cancelOrder">
			<view class="u-p-22">
				<u-form labelWidth="auto" :error-type="['message','border-bottom']" :border-bottom="false"
					:model="closeForm" ref="closeFormEl">
					<u-form-item prop="cancelReason">
						<u-input v-model="closeForm.cancelReason" placeholder="请输入取消理由" type="textarea"
							border></u-input>
					</u-form-item>
				</u-form>
				<!-- 	<textarea v-model="closeForm.cancelReason" placeholder="输入取消原因" maxlength="-1" class="u-border u-p-26"
				style="box-sizing: border-box;width: 100%;"></textarea> -->
			</view>
		</u-modal>
	</fragments>
</template>

<script setup lang="ts">
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
	} from "vue";
	import orderApi from '@/api/order'
	import taskApi from "@/api/task"
	import rescueApi from "@/api/rescue"
	import indexEnum from '@/enum/index'
	import userSotre from '@/store/user'
	const orderId = ref()
	const showOper = ref(false)
	const claerEl = ref(null)
	const closeShow = ref(false)
	const operList = ref([])
	const userPinia = userSotre()
	const closeFormEl = ref(null)
	const showWholePhone = ref(false)
	const detailObj = reactive({
		beeperSiteUrl: '',
		beeperAddress: '',
		aedAddress: "",
		aedSiteUrl: "",
		problemImg: '',
		problemVideo: '',
		applyState: '',
		aedId:'',
		jobType:""
	})
	const closeForm = reactive({
		cancelReason: ''
	})
	const closeRules = reactive({
		cancelReason: {
			required: true,
			message: '请输入取消理由',
			// 可以单个或者同时写两个触发验证方式
			trigger: ['change', 'blur'],
		}
	})

	onLoad((e) => {
		orderId.value = e.orderId
		getDetail(true)
		getRescueDetail()
	})
	// 函数
	const getDetail = (first) => { //查询订单详情
		orderApi.getOrder({
			id: orderId.value
		}).then(res => {
			if (res.data.orderAttrs === null) {
				res.data.orderAttrs = []
			}

			// selectedTime.value = res.data.expectedTime
			if (res.data.phone) {
				showWholePhone.value = false
				res.data.wholePhone = res.data.phone
				res.data.phone = res.data.phone.split("")
				res.data.phone.splice(3, 4, "****")
				res.data.phone = res.data.phone.join("")
			}
			Object.assign(detailObj, res.data)
			if (res.data.orderAttrs[res.data.goodsList[0].goodsId].length != 0) {
				res.data.orderAttrs[res.data.goodsList[0].goodsId].forEach(item => {
					if (item.fieldType == 4) {
						detailObj.problemImg = item.value
					}
					if (item.fieldType == 5) {
						detailObj.problemVideo = item.value
					}
				})
			}
			if (first) {
				closeFormEl.value.setRules(closeRules)
			}
		})
	}

	const getRescueDetail = (r) => {
		rescueApi.getRescueDetail({
			orderId: orderId.value
		}).then(res => {
			detailObj.beeperAddress = res.data.beeperAddress
			detailObj.beeperSiteUrl = res.data.beeperSiteUrl
			detailObj.aedAddress = res.data.aedAddress
			detailObj.aedSiteUrl = res.data.aedSiteUrl
			detailObj.jobType = res.data.jobType
			detailObj.aedId =  res.data.jobType==1?res.data.aedId:''
			detailObj.applyState = res.data.applyState || ''
			if(r){
				uni.showToast({
					title: '已刷新...'
				})
			}
		})
	}

	const getOper = () => {
		orderApi.getListOper({
			orderId: orderId.value
		}).then(res => {
			operList.value = res.data
		})
	}

	const reloadClick = () => {
		getDetail()
		getRescueDetail(true)
	}

	const returnAed = () =>{
		let data = {
			id:detailObj.aedId,
			state:1
		}
		rescueApi.returnAed(data).then(res=>{
			uni.showToast({
				title: 'AED已归还'
			})
			getRescueDetail()
		})
	}

	const cancelOrder = async () => { //取消订单
		const valid = await closeFormEl.value.validate()
		if (valid) {
			try {
				if (userPinia.isLoginType == 3) {
					claerEl.value.clearLoading()
					await orderApi.cancelOrder(Object.assign(closeForm, {
						orderId: orderId.value
					}))
				} else {
					claerEl.value.clearLoading()
					await taskApi.taskOperate({
						orderId: orderId.value,
						state: 3
					})
				}
				uni.showToast({
					title: '取消成功',
					success: () => {
						closeShow.value = false
					}
				})
				uni.navigateBack({
					delta: 1
				})
			} catch {
				// closeShow.value = false
			}


		} else {
			claerEl.value.clearLoading()
		}
	}

	const copy = (str : string) => {
		uni.setClipboardData({
			data: str,
			success: () => {
				uni.showToast({
					title: "复制成功"
				})
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}

	const callphone = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone,
		})
	}

	const showBigimg = (url) => {
		uni.previewImage({
			current: 0, //预览图片的下标
			urls: [url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
		})
	}

	const orderOperate = (type : number, str : string) => {// 服务员对订单的操作

		uni.showModal({
			title: '确认操作',
			content: `是否${str}`,
			success: (rules) => {
				if (rules.confirm) {
					orderApi.orderOperate({
						id: orderId.value,
						state: type
					}).then(res => {
						uni.showToast({
							title: "操作成功",
							success: () => {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.line {
		border-left: 6rpx solid #f39c12;
		height: 52rpx;
		width: 20rpx;
		margin-left: 20rpx;
	}

	.container {
		padding: 0 26px;
		box-sizing: border-box;

		.operateBox {
			border-radius: 12px;
			overflow: hidden
		}

		.orderInfo {
			border-radius: 12px;
			overflow: hidden
		}

		.text-28 {
			font-size: 28rpx;
			color: #e74c3c;
		}

		.text-black {
			color: #333333;
		}

		.u-cell_title {
			color: #000000;
		}

		.u-cell__value {
			color: #333333 !important;
		}
	}

	.showOper {
		.title {
			line-height: 3.2em;
			font-size: 32upx;
			text-align: center;
			font-weight: 600;
		}

		.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}

		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}

		.u-order-desc {
			color: rgb(150, 150, 150);
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}

		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
	}
</style>
